<template>
  <div class="success">
    <nav-top title="支付成功"
             :goback='true'></nav-top>
    <div class="status">
      <img src="/static/img/appointment/finish.png"
           alt="">
      <span>
        支付成功
      </span>
    </div>
    <div class="order">
      <span>订单编号&nbsp;&nbsp;&nbsp;&nbsp;{{orderNum}}</span>
    </div>
    <div class="time">
      <span>支付时间&nbsp;&nbsp;&nbsp;&nbsp;{{time}}</span>
    </div>
    <div class="price">
      <span>支付金额&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="money">¥{{price}}</span>
    </div>

    <div class="btn">
      <button class="goback"
              @click='goback'>返回首页</button>
      <button class="see"
              @click='see'>查看预约</button>
    </div>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
export default {
  name: 'SuccessToAppointment',
  components: {
    NavTop
  },
  data () {
    return {
      orderNum: 190918170524436,
      time: '2019-09-19 17:19',
      price: '7020'
    }
  }, methods: {
    goback () {
      this.$router.push('/home')
    },
    see () {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
.success {
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 10px;
  .status {
    width: 320px;
    height: 30px;
    margin: 66px 0 28px 7px;
    img {
      width: 22px;
      height: 22px;
    }
    span {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 30px;
      vertical-align: super;
    }
  }
  .order,
  .time,
  .price {
    margin: 17px 0 0 7px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    .money {
      color: rgba(6, 164, 79, 1);
    }
  }
  .btn {
    margin-top: 78px;
    width: 320px;
    text-align: center;
    font-size: 13px;
    .goback {
      width: 91px;
      height: 29px;
      border: 1px solid #07a34f;
      color: #07a34f;
      background: #fff;
      border-radius: 26px;
      margin-right: 36px;
    }
    .see {
      width: 91px;
      height: 29px;
      background: #07a34f;
      color: #fff;
      border: none;
      border-radius: 29px;
    }
  }
}
</style>